<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Toggle absolute children</title>
  <style>
      .container {
          display: block;
          position: relative;
          left: 50%;
          top: 50%;
          right: 50%;
          width: 300px;
          margin-left: -150px;
          border: 1px solid #000;
      }

      .wrapper {
          display: flex;
          padding: 10px;
          justify-content: center;
          flex-direction: column;
      }

      .top {
          padding: 25px;
          padding-left: 45px;
          font-size: 20px;
          font-weight: 700;
          display: flex;
          justify-content: center;
          flex-direction: column;
      }

      .imgText {
          border: 1px solid #000;
          flex-direction: column;
      }

      .imgText img {
          width: 20px;
          height: 20px;
          margin-right: 5px;
          position: absolute;
          top: 30px;
          left: 20px;
      }
  </style>
</head>
<body>
<div class="container">
  <div class="wrapper">
    <div class="top">
      <div class="imgText">
        <img
          src=""/>
        <span>Header</span>
        <div>The positioned icon should remain in same position when toggle.</div>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  await snapshotAction();
  let visible = true;
  let container = document.querySelector('.container');
  container.style.display = 'none';
  await snapshotAction();
  container.style.display = 'block';
  await snapshotAction();
</script>
</html>